<template>
	<view :style="warpCss">
		<view class="member-info">
			<!-- #ifdef MP-WEIXIN -->
			<!-- 解决fixed定位后导航栏塌陷的问题 -->
			<!-- <view :style="navbarInnerStyle"></view> -->
			<!-- #endif -->
			<view v-if="info" class="flex ml-[32rpx] pt-[20rpx]  items-center relative">

				<!-- 唤起获取微信 -->
				<!-- <u-avatar :src="img(info.avatar)" size="65" leftIcon="none"
					:default-url="img('static/resource/images/default_headimg.png')" @click="editMemberFn(Number(info.id))" /> -->
				<u-avatar :src="img(info.avatar)" size="65" leftIcon="none"
					:default-url="img('static/resource/images/default_headimg.png')" @click="show = true" />
				<view class="ml-[22rpx]">
					<view class="text-[#222222] flex  flex-wrap items-center">
						<view class="text-[#222222] text-[40rpx] truncate max-w-[320rpx] font-bold  mr-[16rpx]"
							:style="{ color: diyComponent.textColor }">{{ info.nickname }}</view>
						<view class="text-[30rpx] font-400 leading-[28rpx] ml-[10rpx]" v-if="info.levelName">
							{{ info.levelName }}</view>
						<view class="text-[30rpx] font-400 leading-[28rpx] ml-[10rpx]" v-if="info.birthday">
							<text> {{ formatDate(info.birthday, 'MM-DD') }}
							</text>
							<uni-tooltip :content="'生日'" @click.stop placement="left">
								<uni-icons type="info" size="15"></uni-icons>
								<template #content>
									<view class="w-50rpx">
										生日
									</view>
								</template>
							</uni-tooltip>

						</view>
					</view>
					<!-- <view class="text-[#696B70] text-[24rpx] mt-[10rpx]" :style="{ color: diyComponent.textColor }">UID：{{
						info.id }}</view> -->
					<view class="text-[#696B70] flex text-[30rpx] mt-[10rpx]" :style="{ color: diyComponent.textColor }">
						<view v-if="info.mobile" @click="toCall(info.mobile)" class="truncate max-w-[320rpx]">
							<uni-icons type="phone" size="14"></uni-icons>
							{{
								info.mobile.replace(info.mobile.substring(3, 7), "****") }}
						</view>
						<!-- <view v-if="info.tenantName" class="ml-[10rpx] truncate max-w-[320rpx]">
							{{ info.tenantName }}
						</view>
						<view v-if="info.activeDays" class="ml-[10rpx]">
							{{ info.activeDays }}天<uni-tooltip :content="'生日'" @click.stop placement="left">
								<uni-icons type="info" size="14"></uni-icons>
								<template #content>
									<view class="w-100rpx">
										距今到店
									</view>
								</template>
							</uni-tooltip>
						</view> -->
					</view>
					<view class="text-[#696B70] flex text-[30rpx] mt-[10rpx]" :style="{ color: diyComponent.textColor }">

						<view v-if="info.tenantName" class="ml-[10rpx] truncate max-w-[320rpx]">
							{{ info.tenantName }}
						</view>
						<view v-if="info.activeDays" class="ml-[10rpx]">
							{{ info.activeDays }}<uni-tooltip @click.stop placement="left">
								<uni-icons type="info" size="14"></uni-icons>
								<template #content>
									<view class="w-100rpx">
										距今到店
									</view>
								</template>
							</uni-tooltip>
						</view>
					</view>
				</view>

				<view class=" flex items-center absolute right-0 top-0 " v-if="info?.employeeInfo?.employeeName">
					<view class="flex items-center employee-badge">
						<u-avatar :src="img(info?.employeeInfo?.avatar)" size="25" leftIcon="none"
							:default-url="img('static/resource/images/default_headimg.png')" />
						<view class="ml-[10rpx]"> {{ info?.employeeInfo?.employeeName }}</view>
					</view>
				</view>
				<!-- <view class="set-icon flex items-center absolute right-0 top-2">
					<view>
						<text class="nc-iconfont nc-icon-shezhiV6xx-1 text-[40rpx] ml-[10rpx]"
							:style="{ color: diyComponent.textColor }"></text>
					</view>
				</view> -->
			</view>
			<!-- <view v-else class="flex ml-[32rpx] mr-[52rpx]  items-center relative">
				<u-avatar :src="img('static/resource/images/default_headimg.png')" size="55" @click="toLogin" />
				<view class="ml-[22rpx]" @click="toLogin">
					<view class="text-[#222222] font-bold text-lg" :style="{ color: diyComponent.textColor }">
						{{ t('login') }}
					</view>
				</view>
				<view class="set-icon flex items-center absolute right-0 top-2"
					@click="redirect({ url: '/app/pages/setting/index' })">
					<view>
						<text class="nc-iconfont nc-icon-shezhiV6xx-1 text-[40rpx] ml-[10rpx]"
							:style="{ color: diyComponent.textColor }"></text>
					</view>
				</view>
			</view> -->

			<view class="flex m-[30rpx] mb-0 pb-[30rpx] items-center">
				<view class="flex-1 text-center">
					<view class="font-bold">
						<view @click="redirect({ url: info ? '/app/pages/member/balance' : '' })"
							:style="{ color: diyComponent.textColor }">
							<text class="text-[32rpx] ">{{
								parseFloat(formatNumberToWan(fen2yuan(info?.balance))).toFixed(2).split('.')[0] }}</text>
							<text class="text-[22rpx] ">.{{
								parseFloat(formatNumberToWan(fen2yuan(info?.balance))).toFixed(2).split('.')[1] }}</text>
							{{ Math.abs(info?.balance) >= 1000000 ? '万' : '' }}

						</view>
					</view>
					<view class="text-[32rpx] mt-[10rpx]">
						<view @click="redirect({ url: info ? '/app/pages/member/balance' : '' })"
							:style="{ color: diyComponent.textColor }">{{ t('balance') }}</view>
					</view>
				</view>
				<view class="border-solid border-white border-l border-b-0 border-t-0 border-r-0 h-[60rpx]"></view>
				<view class="flex-1 text-center">
					<view class="font-bold">
						<view @click="redirect({ url: info ? '/addon/shopMemberInfo/pages/cardBalance' : '' })"
							:style="{ color: diyComponent.textColor }">
							<text class="text-[32rpx] ">{{
								parseFloat(formatNumberToWan(fen2yuan(info?.ppcBalance))).toFixed(2).split('.')[0] }}</text>
							<text class="text-[22rpx] ">.{{
								parseFloat(formatNumberToWan(fen2yuan(info?.ppcBalance))).toFixed(2).split('.')[1] }} </text>
							{{ Math.abs(info?.ppcBalance) >= 1000000 ? '万' : '' }}
						</view>

					</view>
					<view class="text-[32rpx] mt-[10rpx]">
						<view @click="redirect({ url: info ? '/addon/shopMemberInfo/pages/cardBalance' : '' })"
							:style="{ color: diyComponent.textColor }"> 资产 </view>
					</view>
				</view>
				<view class="border-solid border-white border-l border-b-0 border-t-0 border-r-0 h-[60rpx]"></view>
				<view class="flex-1 text-center">
					<view class="font-bold">
						<view @click="redirect({ url: info ? '/addon/debt/pages/order/list?type=member' : '' })"
							:style="{ color: diyComponent.textColor }">
							<text class="text-[32rpx] ">{{
								parseFloat(formatNumberToWan(fen2yuan(info.arrearsPrice))).toFixed(2).split('.')[0] }}</text>
							<text class="text-[22rpx] ">.{{
								parseFloat(formatNumberToWan(fen2yuan(info.arrearsPrice))).toFixed(2).split('.')[1] }}</text>
							{{ Math.abs(info.arrearsPrice) >= 1000000 ? '万' : '' }}

						</view>
					</view>
					<view class="text-[32rpx] mt-[10rpx]">
						<view @click="redirect({ url: info ? '/addon/debt/pages/order/list?type=member' : '' })"
							:style="{ color: diyComponent.textColor }"> 欠款 </view>
					</view>
				</view>
				<view class="border-solid border-white border-l border-b-0 border-t-0 border-r-0 h-[60rpx]"></view>
				<view class="flex-1 text-center">
					<view class="font-bold">
						<view @click="redirect({ url: info ? '/app/pages/member/point' : '' })"
							:style="{ color: diyComponent.textColor }">
							<text class="text-[32rpx] ">{{ formatNumberToWan(parseInt(info?.point)) || 0 }}</text>
							{{ Math.abs(info.point) >= 10000 ? '万' : '' }}

						</view>
					</view>
					<view class="text-[32rpx] mt-[10rpx]">
						<view @click="redirect({ url: info ? '/app/pages/member/point' : '' })"
							:style="{ color: diyComponent.textColor }">{{ t('point') }}</view>
					</view>
				</view>
				<view class="border-solid border-white border-l border-b-0 border-t-0 border-r-0 h-[60rpx]"></view>
				<view class="flex-1 text-center">
					<view class="font-bold">
						<view @click="redirect({ url: info ? '/addon/shop/pages/member/my_coupon' : '' })"
							:style="{ color: diyComponent.textColor }">
							<text class="text-[32rpx] ">{{ info.couponNum || 0 }}</text>
							张
						</view>
					</view>
					<view class="text-[32rpx] mt-[10rpx]">
						<view @click="redirect({ url: info ? '/addon/shop/pages/member/my_coupon' : '' })"
							:style="{ color: diyComponent.textColor }"> 优惠券 </view>
					</view>
				</view>

			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<information-filling ref="infoFill"></information-filling>
		<!-- #endif -->
		<u-popup :show="show" mode="bottom" :round="10" :closeable="true" @close="show = false"
			:safe-area-inset-bottom="false">
			<view class="dialog-popup">
				<view class="title">请选择操作</view>
				<view @click="editMemberFn(Number(info.id))"
					class="sidebar-margin card-template  mb-[var(--top-m)] bg-[var(--primary-color)] mt-[60rpx] p-[20rpx] rounded-[var(--rounded-big)]">

					<view class="flex w-full justify-center items-center text-[#fff] h-[200rpx]  py-[4rpx] ">
						<view class="flex items-center text-[52rpx]">
							修改会员信息
						</view>

					</view>
				</view>
				<view @click="editPayPasFn()"
					class="sidebar-margin card-template  mb-[var(--top-m)] bg-[blue] p-[20rpx] rounded-[var(--rounded-big)]">
					<view class="flex w-full justify-center items-center text-[#fff] h-[200rpx]  py-[4rpx]">

						<view class="flex items-center text-[52rpx]">
							修改支付密码
						</view>
					</view>

				</view>

			</view>
		</u-popup>
	</view>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useLogin } from '@/hooks/useLogin'
import { img, isWeixinBrowser, redirect, urlDeconstruction, moneyFormat, getToken } from '@/utils/common'
import { t } from '@/locale'
import { wechatSync } from '@/app/api/system'
import { getUser } from '@/app/api/shopMember';

import useDiyStore from '@/app/stores/diy'
import useConfigStore from '@/stores/config'
import { fen2yuan, formatDate, formatNumberToWan } from '@/utils/formatting'

const props = defineProps(['component', 'index', 'pullDownRefreshCount', 'global']);

const configStore = useConfigStore()
const diyStore = useDiyStore();

const diyComponent = computed(() => {
	if (diyStore.mode == 'decorate') {
		return diyStore.value[props.index];
	} else {
		return props.component;
	}
})
const warpCss = computed(() => {
	var style = '';
	if (diyComponent.value.componentStartBgColor) {
		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
		else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
	}
	if (diyComponent.value.bgUrl) {
		style += 'background-image:url(' + img(diyComponent.value.bgUrl) + ');';
		style += 'background-size: 100%;';
		style += 'background-repeat: no-repeat;';
	}
	if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
	if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';

	return style;
})

watch(
	() => props.pullDownRefreshCount,
	(newValue, oldValue) => {
		// 处理下拉刷新业务
	}
)
const toCall = (phoneNumber: any) => {
	console.log(phoneNumber)
	uni.makePhoneCall({
		phoneNumber: phoneNumber //仅为示例
	});
}
const show = ref(false)
const editMemberFn = (id: number) => {

	const url = `/app/pages/shopMember/member_edit`
	redirect({ url, param: { id } })
	show.value = false
}
const editPayPasFn = () => {

	const url = `/app/pages/shopMember/resetpwd`
	redirect({ url })
	show.value = false
}
// #ifdef H5
const { query } = urlDeconstruction(location.href)
if (query.code && isWeixinBrowser() && getToken()) {
	wechatSync({ code: query.code }).then(res => {
		getMemberInfo()
	})
}
// #endif
const memberInfo = ref({
	avatar: '',
	nickname: '昵称',
	balance: 0,
	point: 0,
	money: 0,
	couponNum: 0,
	ppcNum: 0,
	ppcBalance: 0,
	arrearsPrice: 0,
	mobile: '',
	levelName: '会员等级',
	tenantName: '会员开卡门店',
	activeDays: '',
	birthday: '',
	employee: '归属员工',
	employeePicUrl: '',
	id: 'METON0000021'
})

const info = computed(() => {
	// 装修模式
	if (diyStore.mode == 'decorate') {
		return {
			avatar: '',
			nickname: '昵称',
			balance: 0,
			point: 0,
			money: 0,
			couponNum: 0,
			ppcNum: 0,
			ppcBalance: 0,
			arrearsPrice: 0,
			mobile: '',
			levelName: '会员等级',
			tenantName: '会员开卡门店',
			activeDays: '',
			birthday: '',
			employee: '归属员工',
			employeePicUrl: '',
			id: 'METON0000021'
		}
	} else {

		return memberInfo.value
	}
})
const getMemberInfo = async () => {
	let userId = ''
	if (uni.getStorageSync('wapShopMember')) {
		userId = uni.getStorageSync('wapShopMember').id;
		const { data: Info } = await getUser(userId)
		memberInfo.value = Info
	}
}
onMounted(() => {
	console.log('获取会员信息')
	getMemberInfo()
})
// const money = computed(() => {
// 	if (info.value) {
// 		let m = parseFloat(info.value.balance) + parseFloat(info.value.money)
// 		return moneyFormat(m.toString());
// 	} else {
// 		return 0;
// 	}
// })

const toLogin = () => {
	let normalLogin = !configStore.login.is_username && !configStore.login.is_mobile && !configStore.login.is_bind_mobile; // 未开启普通登录
	let authRegisterLogin = !configStore.login.is_auth_register; // 自动注册登录

	// #ifdef H5
	if (isWeixinBrowser()) {
		// 微信浏览器
		if (normalLogin && authRegisterLogin) {
			uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
		} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
			useLogin().setLoginBack({ url: '/app/pages/member/index' })
		} else if (normalLogin && configStore.login.is_auth_register) {
			// 判断是否开启第三方自动注册登录
			useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
		}
	} else {
		// 普通浏览器
		if (normalLogin) {
			uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
		} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
			useLogin().setLoginBack({ url: '/app/pages/member/index' })
		}
	}
	// #endif

	// #ifdef MP
	if (normalLogin && authRegisterLogin) {
		uni.showToast({ title: '商家未开启登录注册', icon: 'none' })
	} else if (configStore.login.is_username || configStore.login.is_mobile || configStore.login.is_bind_mobile) {
		useLogin().setLoginBack({ url: '/app/pages/member/index' })
	} else if (normalLogin && configStore.login.is_auth_register) {
		// 判断是否开启第三方自动注册登录
		useLogin().getAuthCode()
	}
	// #endif
}

const infoFill: any = ref(false)
const clickAvatar = () => {
	// #ifdef MP-WEIXIN
	infoFill.value.show = true
	// #endif

	// #ifdef H5
	if (isWeixinBrowser()) {
		useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
	} else {
		redirect({ url: '/app/pages/member/personal' })
	}
	// #endif
}
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
	let style = '';
	// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
	// #ifdef MP
	if (props.global.topStatusBar.isShow == false) {
		style += 'height:' + menuButtonInfo.height + 'px;';
		style += 'padding-top:' + menuButtonInfo.top + 'px;';
	}
	// #endif
	return style;
})
</script>

<style lang="scss" scoped>
.employee-badge {
	position: relative;
	/* 基础圆角，可按需微调 */
	/* 黑色背景，可调整透明度等 */
	background-color: #2B2825;
	color: #fff;
	padding: 16rpx 24rpx;
	border-top-right-radius: 20rpx;
	border-bottom-left-radius: 20rpx;

	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.plus-text {
	font-weight: bold;
	font-size: 14px;
}

.sub-text {
	font-size: 12px;
	opacity: 0.9;
}

.gift-icon {
	width: 20px;
	height: 20px;
	/* 替换为实际礼物图标的路径，也可用字体图标或纯 CSS 画小礼物 */
}

.dialog-popup {
	width: 100%;
	background: #fff;
	box-sizing: border-box;
	border-radius: 10rpx;
	overflow: hidden;
	height: initial;
	height: 80vh;

	.title {
		padding: 30rpx 30rpx 0 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.message {
		padding: 0 30rpx;
		color: #666;
		text-align: center;
		line-height: 1.3;
		margin-top: 30rpx;
	}



}
</style>
